<style lang="scss">
.menu-form {
     .opt {
         margin-top: 15px; 
         .label {
             display: inline-block;
             width: 120px;
             padding-right: 10px;
             text-align: right;
         }
     }
}

</style>

<template>
     <h3>面试题子菜单</h3>
     <!-- 表单（采集信息） -->
      <div class="menu-form">
            <!-- 一级菜单ID -->
            <div class="opt">
               <span class="label">
                    选择主菜单:
               </span>
               <!-- select 下拉选项组件 -->
               <el-select
                    v-model="id"
                    placeholder="请选择主菜单"
                    size="large"
                    style="width: 240px"
                    @change="choonseCategoryFn"
               >
                    <el-option
                    v-for="item in options"
                    :key="item.category_id"
                    :label="item.category_text"
                    :value="item.category_id"
                    />
               </el-select>
            </div>

            <!-- 二级菜单名称 -->
            <div class="opt">
                <span class="label">
                    子菜单名称:
                </span>
                <!-- input 输入框组件 -->
                <el-input v-model="input" size="large" style="width: 240px" placeholder="请输入子菜单" />
            </div>

            <div class="opt">
               <!-- 按钮组件 -->
               <el-button @click="addInterviewMenuFn" type="primary">添加子菜单</el-button>
            </div>
      </div>


     <!-- 表格（显示信息） -->
     <div class="menu-list" style="margin-top: 15px;">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="index" label="序号" width="70" />
            <el-table-column prop="category_id" label="主菜单ID" width="180" />
            <el-table-column prop="category_text" label="主菜单名称" width="180" />
            <el-table-column prop="menu_id" label="子菜单ID" width="180" />
            <el-table-column prop="menu_name" label="子菜单名称" width="280" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script lang="ts" setup>
import { ref } from "vue";
import { listInterviewCategory, addInterviewMenu, listInterviewMenu, removeInterviewMenu } from '@/api/request'
import { ElMessage, ElMessageBox } from 'element-plus';
// interface Item {
//      category_id: string
//      menu_id: string
//      menu_name: string
// }


// 对象属性和属性值是未知的数据类型的情况下
interface Item {
    [key:string]:any
}


// 定义响应式变量
let id = ref("")
let input = ref("")
let options = ref<Item>([])
let text = ref('')
let tableData = ref([])

// 定义函数 
// 获取主菜单列表
const listInterviewCategoryFn = async () => {
     await listInterviewCategory()
     .then(
          content=>{
               //  console.log("1.0",content);
                let {code , result } = content;
                if(code == 200) {
                    // 整合数据
                    let arr = result.map((item:Item,index:any)=>{
                         let obj:Item = {};
                         obj.category_id = item.category_id;
                         obj.index = index;
                         obj.category_text = item.category_text;
                         return obj;
                    })
                    // 赋值
                    options.value = arr;
                }
          }
     )
}

// 选择主菜单下拉选项
const choonseCategoryFn = (value: string)=>{
     // console.log(value)
     let arr = options.value.filter((item: Item)=>{
          return item.category_id == value
     })
     if(arr){
          text.value = arr[0].category_text;
     }
}

// 添加子菜单(发布)
const addInterviewMenuFn = async ()=> {
     let category_id = id.value;
     let menu_name = input.value;
     let category_text = text.value;
     if(category_id && menu_name) {
          // 调用添加菜单的方
          await addInterviewMenu({category_id, menu_name,category_text})
          .then(
               content=>{
                    // console.log("2.0", content)
                    let {code ,msg}= content;
                    if(code == 200) {
                         listInterviewMenuFn();// 获取子菜单列表
                         ElMessage.success(msg);
                    }
                    else {
                         ElMessage.error(msg);
                    }
               }
          )
     }
     else {
          ElMessage.error("表单不能缺少参数")
     }
}

// 点击删除子菜单
const handleDelete = (index: number, row: any) => {
    // console.log(index, row)
     // console.log(index, row)
    // 获取当前点击的选项
    let { menu_id } = row;
    ElMessageBox.confirm(
        `是否删除这个题目?`,
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            // console.log("点击确定")
            // 删除子菜单
            await removeInterviewMenu({ menu_id })
                .then(
                    content => {
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                    }
                )
            // 删除程序中数组对应的数据
            tableData.value.splice(index, 1);
        })
        .catch(( ) => {
            // console.log("点击取消")
        })
}

// 获取子菜单列表
const listInterviewMenuFn = async () => {
     await listInterviewMenu()
     .then(
          (content)=>{
               // console.log("3.0",content)
               let {code , result} = content;
               if(code == 200) {
                    tableData.value = result;
               }
          }
     )
}    


// 初始化调用的函数
listInterviewCategoryFn(); // 获取主菜单列表
listInterviewMenuFn();// 获取子菜单列表

</script>